<template>
  <div class="app-container" id="business">
    <dialogRebate class="sel" @update="companyList" @close="close" v-if="lookShow"></dialogRebate>
    <div>
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit
                highlight-current-row max-height="550" class="businessTable">
        <el-table-column align="center" label='商家名称' min-width="150">
          <template slot-scope="scope">
            {{scope.row.companyName}}
          </template>
        </el-table-column>
        <el-table-column align="center" label='商家id' min-width="200">
          <template slot-scope="scope">
            {{scope.row.companyId}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="商家NO" min-width="150">
          <template slot-scope="scope">
            {{scope.row.companyNo}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="audit(scope,'update')">配置</el-button>
            <el-button type="danger" size="mini" @click="audit(scope,'look')">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="size">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
  import { companyList } from 'api/business'
  import dialogRebate from './companyConfig.vue'
  export default {
    components: {
      dialogRebate
    },
    data() {
      return {
        lookShow: false,
        list: null,
        listLoading: true,
        label: '',
        label1: '',
        label2: '',
        formLabelWidth: '100px',
        size: 0,
        pageSize: 10,
        curPage: 1
      }
    },
    computed: {
      route() {
        return this.$route
      }
    },
    created() {
      this.companyList()
    },
    methods: {
      close() {
        this.lookShow = false
        sessionStorage.removeItem('config_companyId')
        sessionStorage.removeItem('config_companyNo')
        sessionStorage.removeItem('config_companyName')
        sessionStorage.removeItem('config_readonly')
        this.companyList()
      },
      async audit(scope, vueType) {
        this.lookShow = true
        sessionStorage.setItem('config_companyId', scope.row.companyId)
        sessionStorage.setItem('config_companyNo', scope.row.companyNo)
        sessionStorage.setItem('config_companyName', scope.row.companyName)
        if (vueType === 'look') {
          sessionStorage.setItem('config_readonly', 'read')
        } else if (vueType === 'update') {
          sessionStorage.setItem('config_readonly', 'update')
        }
      },
      async companyList() {
        const parm = {
          pageSize: this.pageSize,
          curPage: this.curPage - 1,
          companyName: '',
          profitOrigin: '',
          saleStatus: ''
        }
        try {
          let back = await companyList(parm)
          back = back.data
          if (back.resultCode === '200') {
            this.list = back.result
            this.size = back.size
            this.listLoading = false
          } else {
            this.$alert(back.msg)
          }
        } catch (err) {
          this.$alert('请求失败', '提示')
        }
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.companyList()
      },
      handleCurrentChange(val) {
        this.curPage = val
        this.companyList()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #business {
    .businessTable {
      margin-top: 20px;
    }
    .input {
      margin: 0 10px;
      float: left;
    }
    .button {
      float: right;
      margin: 0 10px;
    }
    .block {
      float: right;
      margin-top: 10px;
    }
    .sel{
      float: left;
      &:nth-child(2){
        margin-left:20px;
      }
    }
    .addButton{
      float: left;
    }
  }
</style>
